<template>
    <Top/>
    <el-row :gutter="20" class="el-row">
        <el-col :span="8">
            <el-card>
                <template #header>
                    Payment Details
                </template>
                <el-form :model="order" label-width="120px">
                    <el-form-item label="Card Type:">
                        <el-select v-model="order.cardType" placeholder="Visa" value="Visa">
                            <el-option label="Visa" value="Visa"/>
                            <el-option label="MasterCard" value="MasterCard"/>
                            <el-option label="American Express" value="American Express"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="Card Number:">
                        <el-input v-model="order.creditCard" />
                    </el-form-item>
<!--                    <el-form-item label="Expiry Date (MM/YYYY):">-->
<!--                        <el-input v-model="order.expiryDate" />-->
<!--                    </el-form-item>-->
                </el-form>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card>
                <template #header>
                    Billing Address
                </template>
                <el-form :model="order" label-width="120px">
                    <el-form-item label="First name:">
                        <el-input v-model="order.billToFirstName" />
                    </el-form-item>
                    <el-form-item label="Last name:">
                        <el-input v-model="order.billToFirstName" />
                    </el-form-item>
                    <el-form-item label="Address 1:">
                        <el-input v-model="order.billAddress1" />
                    </el-form-item>
                    <el-form-item label="Address 2:">
                        <el-input v-model="order.billAddress2" />
                    </el-form-item>
                    <el-form-item label="City:">
                        <el-input v-model="order.billCity" />
                    </el-form-item>
                    <el-form-item label="State:">
                        <el-input v-model="order.billState" />
                    </el-form-item>
                    <el-form-item label="Zip:">
                        <el-input v-model="order.billZip" />
                    </el-form-item>
                    <el-form-item label="Country:">
                    <el-input v-model="order.billCountry" />
                </el-form-item>

                </el-form>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card>
                <template #header>
                    Shipping Address
                </template>
                <el-form :model="order" label-width="120px">
                    <el-form-item label="First name:">
                        <el-input v-model="order.shipToFirstName" />
                    </el-form-item>
                    <el-form-item label="Last name:">
                        <el-input v-model="order.shipToLastName" />
                    </el-form-item>
                    <el-form-item label="Address 1:">
                        <el-input v-model="order.shipAddress1" />
                    </el-form-item>
                    <el-form-item label="Address 2:">
                        <el-input v-model="order.shipAddress2" />
                    </el-form-item>
                    <el-form-item label="City:">
                        <el-input v-model="order.shipCity" />
                    </el-form-item>
                    <el-form-item label="State:">
                        <el-input v-model="order.shipState" />
                    </el-form-item>
                    <el-form-item label="Zip:">
                        <el-input v-model="order.shipZip" />
                    </el-form-item>
                    <el-form-item label="Country:">
                        <el-input v-model="order.shipCountry" />
                    </el-form-item>

                </el-form>
            </el-card>
        </el-col>
    </el-row>
    <el-affix position="bottom">
        <el-button type="primary" @click="continueTo">continue</el-button>
    </el-affix>
    <Bottom/>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import OrderService from "@/stores/OrderService"
import router from '@/routes';

const loginAccount = JSON.parse(sessionStorage.getItem('loginAccount'))
const cart = JSON.parse(sessionStorage.getItem('cart'))
const order = ref([])

const generateOrder = async (loginAccount, cart) => {
    console.log({loginAccount, cart})
    const [err, res] = await OrderService.promise_process(OrderService.generateOrder(loginAccount, cart))
    // const [err, res] = await OrderService.promise_process(OrderService.getOrderById(''))
    if(err){
    console.log(err)
    ElMessage({
          message: '服务器异常，生成订单失败！',
          type: 'error',
        })
    router.push('/cart')
  }
  if(res){
    // console.log(res.data)
    ElMessage({
          message: '生成订单',
          type: 'success',
        })
    order.value = res.data
    // console.log(order.value)
    }
}

// const order = reactive({
//     orderId:'',
//     orderNum: '',
//     username: '',
//     orderDate:'',
//     cardType:'',
//     creditCard:'',
//     expiryDate:'',
//     billToFirstName:'',
//     billToLastName:'',
//     billAddress1:'',
//     billAddress2:'',
//     billCity:'',
//     billState:'',
//     billZip:'',
//     billCountry:'',
//     shipToFirstName:'',
//     shipToLastName:'',
//     shipAddress1:'',
//     shipAddress2:'',
//     shipCity:'',
//     shipState:'',
//     shipZip:'',
//     shipCountry:'',
//     totalPrice:0,
// })



const continueTo = () => {
//   let account = JSON.parse(sessionStorage.getItem("loginAccount"))
//   order.username=account.username
//   order.courier="somebody"      //快递员
//   order.totalPrice=sessionStorage.getItem("subTotal")
//   sessionStorage.setItem("order",JSON.stringify(order))
//   alert(sessionStorage.getItem('order'))/////////////////////////////
    sessionStorage.setItem("order",JSON.stringify(order.value))
    router.push({
        path:'/order/confirm'
    })
}

onMounted(() => {
    generateOrder(loginAccount, cart)
})
</script>
<style scoped>
.el-row{
    width: 1280px;
    height: 500px;
}

.el-card{
    margin-bottom: 20px;
}
</style>
